<template>
	<view class="container">
		<!-- 头部 -->
		<view class="header">
			<view class="logo"></view>
			<text class="welcome-text">{{shopName}}, 欢迎您</text>
		</view>
		<!-- 操作按钮区 -->
		<view class="operation-buttons">
			<button class="scan-button" @click="scanCode">
				<image src="@/static/扫一扫.png" mode="aspectFit"></image>
				<text>扫码核销</text>
			</button>
			<button class="input-button" @click="inputCode">
				<image src="@/static/T.png" mode="aspectFit"></image>
				<text>输入核销码</text>
			</button>
		</view>


		<!-- 功能模块区 -->
		<view class="function-modules">
			<view class="module" @click="goToStatistics">
				<image src="/static/经营统计.png" mode="aspectFit"></image>
				<view>经营统计</view>
			</view>
			<view class="module" @click="goToRecords">
				<image src="@/static/核销记录.png" mode="aspectFit"></image>
				<view>核销记录</view>
			</view>
			<view class="module" @click="goToDetails">
				<image src="/static/收支明细.png" mode="aspectFit"></image>
				<view>收支明细</view>
			</view>


			<view class="module" @click="goToOrderManagement">
				<image src="/static/订单管理.png" mode="aspectFit"></image>
				<view>订单管理</view>
				<view class="badge" v-if="orderBadge > 0">{{orderBadge}}</view>
			</view>
			<view class="module" @click="goToCouponManagement">
				<image src="/static/卡券管理.png" mode="aspectFit"></image>
				<view>卡券管理</view>
			</view>
			<view class="module" @click="goToTaskManagement">
				<image src="/static/维修任务.png" mode="aspectFit"></image>
				<view>维修任务</view>
				<view class="badge" v-if="taskBadge > 0">{{taskBadge}}</view>
			</view>
			<view class="module" @click="goToEvaluationManagement">
				<image src="/static/评价管理.png" mode="aspectFit"></image>
				<view>评价管理</view>
			</view>
			<view class="module" @click="goToMerchantInfo">
				<image src="/static/商户资料.png" mode="aspectFit"></image>
				<view>商户资料</view>
			</view>
			<view class="module" @click="goToActivityPublish">
				<image src="/static/活动发布.png" mode="aspectFit"></image>
				<view>活动发布</view>
			</view>
		</view>
		<!-- 通知与任务列表 -->
		<view class="notification-and-task">
			<view class="notification">
				<image src="/static/最新通知.png" mode="aspectFit"></image>
				<text>最新通知</text>
				<text class="task-count" @click="goToTaskManagement">今日需上门取车任务共{{taskCount}}单>></text>
			</view>

			<view class="task-list">
				<view class="task-header">
					<view class="header-user">用户</view>
					<view class="header-service">服务项目</view>
					<view class="header-time">时间</view>
				</view>
				<view class="task-item" v-for="(task, index) in tasks" :key="index">
					<text class="user">{{task.user}}</text>
					<text class="service">{{task.service}}</text>
					<text class="time">{{task.time}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 修车厂名称
	const shopName = 'XXX修车厂';
	// 订单红点数量
	const orderBadge = ref(1);
	// 维修任务红点数量
	const taskBadge = ref(1);
	// 今日上门取车任务数量
	const taskCount = ref(32);
	// 任务列表数据
	const tasks = ref([{
			user: '张*',
			service: '汽车精细',
			time: '2022-10-10 11:09'
		},
		{
			user: '张*',
			service: '汽车美容. 基础保养',
			time: '2022-10-10 11:09'
		},
		{
			user: '张*',
			service: '车辆维修-上门取车',
			time: '2022-10-10 11:09'
		},
		{
			user: '张*',
			service: '汽车美容. 基础保养',
			time: '2022-10-10 11:09'
		},
		{
			user: '张*',
			service: '车辆维修-到店维修',
			time: '2022-10-10 11:09'
		}
	]);

	// 扫码核销方法
	const scanCode = () => {
		console.log('执行扫码核销操作');
		uni.navigateTo({
			url: '/pages/index/scanCode/scanCode'
		});
	};

	// 输入核销码方法
	const inputCode = () => {
		console.log('执行输入核销码操作');
		uni.navigateTo({
			url: '/pages/index/inputCode/inputCode'
		});
	};

	// 跳转到经营统计页面
	const goToStatistics = () => {
		console.log('跳转到经营统计页面');
		uni.navigateTo({
			url: '/pages/index/statistics/statistics'
		})
	};

	// 跳转到核销记录页面
	const goToRecords = () => {
		console.log('跳转到核销记录页面');
		uni.navigateTo({
			url: '/pages/index/verificationRecord/verificationRecord'
		});
	};

	// 跳转到订单管理页面
	const goToOrderManagement = () => {
		console.log('跳转到订单管理页面');
		uni.navigateTo({
			url: '/pages/index/orderManagement/orderManagement'
		});
	};

	// 跳转到卡券管理页面
	const goToCouponManagement = () => {
		console.log('跳转到卡券管理页面');
		uni.navigateTo({
			url: '/pages/index/couponManagement/couponManagement'
		});
	};

	// 跳转到收支明细页面
	const goToDetails = () => {
		console.log('跳转到收支明细页面');
		uni.navigateTo({
			url: '/pages/index/incomeDetails/incomeDetails'
		})
	};


	// 跳转到维修任务页面
	const goToTaskManagement = () => {
		console.log('跳转到维修任务页面');
		uni.navigateTo({
			url: '/pages/index/taskManagement/taskManagement'
		})
	};

	// 跳转到评价管理页面
	const goToEvaluationManagement = () => {
		console.log('跳转到评价管理页面');
		uni.navigateTo({
			url: '/pages/index/evaluationManagement/evaluationManagement'
		})
	};

	// 跳转到商户资料页面
	const goToMerchantInfo = () => {
		console.log('跳转到商户资料页面');
		uni.navigateTo({
			url: '/pages/index/merchantInfo/merchantInfo'
		})
	};

	// 跳转到活动发布页面
	const goToActivityPublish = () => {
		console.log('跳转到活动发布页面');
		uni.navigateTo({
			url: '/pages/index/activityPublish/activityPublish'
		})
	};
</script>

<style scoped>
	.container {
		background-color: #ffffff;
		position: relative;
		z-index: 1;
	}

	.header {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		background-color: #0D7AF7;
		width: 100%;
		height: 350rpx;
		padding-left: 46rpx;

	}

	.logo {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		background-color: #ffffff;
		margin-right: 30rpx;
		margin-bottom: 40rpx;
	}

	.welcome-text {
		font-size: 34rpx;
		font-weight: bold;
		color: #f4f4f4;
		margin-bottom: 50rpx;

	}

	.operation-buttons {
		margin-bottom: 30rpx;
		position: absolute;
		z-index: 3;
		top: 260rpx;
		text-align: center;
		padding-left: 40rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.scan-button,
	.input-button {
		margin-right: 40rpx;
		display: flex;
		align-items: center;
		line-height: 100rpx;
		justify-content: center;
		width: 320rpx;
		height: 120rpx;
		background-color: #fff;
		border-radius: 15rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.scan-button image,
	.input-button image {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 15rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}

	.scan-button text,
	.input-button text {
		font-size: 32rpx;
	}

	.function-modules {
		width: 100vw;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.module {
		width: 33.33%;
		text-align: center;
		position: relative;
		height: 220rpx;
		background-color: #fff;
		border-radius: 15rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
		padding-top: 50rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.2);
	}

	.module image {
		width: 70rpx;
		height: 70rpx;
		margin-bottom: 15rpx;
	}

	.module view {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}

	.notification-and-task {
		margin-top: 30rpx;
	}

	.badge {
		display: inline-block;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: red;
		color: #fff;
		font-size: 24rpx;
		text-align: center;
		line-height: 30rpx;
		position: absolute;
		top: 26rpx;
		right: 60rpx;
	}

	.notification-and-task {
		background-color: #fff;
		border-radius: 15rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
		padding: 30rpx;
	}

	.notification {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.notification image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 15rpx;
	}

	.notification text {
		font-size: 32rpx;
	}

	.task-count {
		color: #ff6600;
		margin-left: auto;
		font-size: 28rpx;
	}

	.task-list {
		border-top: 1rpx solid #e5e5e5;
	}

	.task-header {
		display: flex;
		font-weight: bold;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #e5e5e5;
	}

	.header-user,
	.header-service,
	.header-time {
		flex: 1;
		width: 33.33%;
	}

	.header-time {
		display: flex;
		justify-content: center;
	}

	.task-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #e5e5e5;
	}

	.user {
		font-size: 30rpx;
	}

	.service {
		font-size: 30rpx;
	}

	.time {
		font-size: 30rpx;
		color: black;
	}
</style>